import React, { useEffect, useState } from 'react'
import instance from '../http/instance'
import { useSearchParams, useNavigate } from 'react-router-dom'
import './z_xiang.css'
import moment from 'moment';
export default function Z_xiang() {
    const nav = useNavigate()
    const [props] = useSearchParams()
    const id = props.get('id')
    const [xianglist, setxianglist] = useState([])
    const getxiang = async () => {
        const data = await instance.get(`http://127.0.0.1:8000/zzxiang?id=${id}`)
        if (data.data.code === 200) {
            setxianglist(data.data.data)
        }
    }
    const zzxihuan = async (item)=>{
        const data = await instance.put(`http://127.0.0.1:8000/gxihuan?id=${item._id}`)
        if(data.data.code === 200){
            getxiang()
        }
    }
    useEffect(() => {
        getxiang()
    })
    return (
        <div style={{ height: '125vh' }}>
            {
                xianglist.map(item => {
                    return <div>
                        <img style={{ width: '100vw', height: '7rem' }} src={item.touxiang} alt="" />
                        <svg onClick={() => {
                            nav(-1)
                        }} style={{ position: 'absolute', top: 10, left: 10 }} t="1733474335422" className="icon"
                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3032" id="mx_n_1733474335422" width="32" height="32"><path d="M862.485 481.154H234.126l203.3-203.3c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0L135.397 489.373c-12.497 12.497-12.497 32.758 0 45.254l256.774 256.775c6.249 6.248 14.438 9.372 22.627 9.372s16.379-3.124 22.627-9.372c12.497-12.497 12.497-32.759 0-45.255l-203.3-203.301h628.36c17.036 0 30.846-13.81 30.846-30.846s-13.81-30.846-30.846-30.846z" fill="#ffffff" p-id="3033"></path></svg>
                    </div>
                })
            }
            {
                xianglist.map(item => {
                    return <div className='zzxinxi'>
                        <h3 style={{ fontSize: 22, marginLeft: '0.3rem', marginTop: '0.3rem' }}>{item.name}</h3>
                        <p style={{ fontSize: 13, marginLeft: '0.3rem', marginTop: '0.1rem', color: 'gray' }}>{item.context}</p>
                        {
                            item.cate.map(it => {
                                return <p style={{ marginLeft: '0.3rem', marginTop: '0.3rem' }}>
                                    <span style={{ backgroundColor: 'ghostwhite', fontSize: 13, borderRadius: '28px 28px' }}>{it.name}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                    <span style={{ backgroundColor: 'ghostwhite', fontSize: 13, borderRadius: '28px 28px' }}>{it.name1}</span>
                                </p>
                            })
                        }
                        <div style={{display:item.xihuan?'none':'block'}}>
                            <button className='zzxihuan' onClick={()=>{
                                zzxihuan(item)
                            }}>❤喜欢</button>
                            <button className='zzsixin'>私信</button>
                        </div>

                    </div>
                })
            }
            {
                xianglist.map(item => {
                    return <div>
                        <h3 style={{ fontSize: 18, marginLeft: '0.3rem'}}>TA的动态</h3>
                        <hr style={{ height: 5, width: 60, backgroundColor: 'plum', marginLeft: '0.3rem', marginTop: '0.1rem' }}></hr>
                        <ul>
                            <li style={{ fontSize: 16, listStyle: 'circle', marginLeft: '0.6rem', marginTop: '0.2rem' }}>{moment(item.time).format('YYYY MM')}月</li>
                        </ul>
                        <div className='zzdongtai'>
                            <p>{item.title}</p>
                            <img style={{ width: '3rem', height: '3rem', marginLeft: '0.3rem', borderRadius: '18px 18px', marginTop: '0.1rem' }} src={item.img_url} alt="" />
                        </div>
                        <button style={{marginLeft:'2rem',width:'3rem',display:item.xihuan?'block':'none'}} className='zzsixin'>私信</button>
                    </div>
                    
                })
            }
            
        </div>
    )
}
